<div class="bs-docs-section" ng-controller="DatepickerDemoCtrl">

  <div class="page-header">
    <h1 id="datepickers">Datepickers <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/src/datepicker/datepicker.js" target="_blank">datepicker.js</a>
    </h1>
    <code>mgcrea.ngStrap.datepicker</code>
  </div>


  <h2 id="datepickers-examples">Examples</h2>
  <p>Add datepicker functionality with any form text input.</p>

  <div class="callout callout-danger">
    <h4>Plugin dependency</h4>
    <p>Datepickers require the <a href="#tooltips">tooltip module</a> and <a href="//github.com/mgcrea/angular-strap/blob/master/src/helpers/date-parser.js" target="_blank">dateParser helper</a> module to be loaded.</p>
    <p>These docs currently use <a href="//github.com/mgcrea/bootstrap-additions/blob/master/src/datepicker/datepicker.less" target="_blank">bootstrap-additions</a> for styling purposes.</p>
  </div>

  <div class="callout callout-info">
    <h4>Support for locales</h4>
    <p>This module leverages the <a href="http://docs.angularjs.org/api/ng.$locale">$locale</a> service. You just have to load the proper <a href="http://docs.angularjs.org/guide/i18n">i18n</a> file to seamlessly translate your datepickers.</p>
  </div>

  <h3>Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs" data-content-html-url="datepicker/docs/datepicker.demo.html" data-content-js-url="datepicker/docs/datepicker.demo.js" ng-plunkr data-placement="right" bs-tooltip></a></h3>
  <pre class="bs-example-scope">$scope.selectedDate = {{selectedDate}}; // &lt;- {{ getType('selectedDate') }}
$scope.selectedDateAsNumber = {{selectedDateAsNumber}}; // &lt;- {{ getType('selectedDateAsNumber') }}
$scope.fromDate = {{fromDate}}; // &lt;- {{ getType('fromDate') }}
$scope.untilDate = {{untilDate}}; // &lt;- {{ getType('untilDate') }}
</pre>
  <div class="bs-example" style="padding-bottom: 24px;" append-source>
    <form name="datepickerForm" class="form-inline" role="form">
      <!-- Basic example -->
      <div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
        <label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as date)</small></label>
        <input type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker>
      </div>
      <!-- Custom example -->
      <div class="form-group" ng-class="{'has-error': datepickerForm.date2.$invalid}">
        <label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as number)</small></label>
        <input type="text" class="form-control" ng-model="selectedDateAsNumber" data-date-format="yyyy-MM-dd" data-date-type="number" data-min-date="02/10/86" data-max-date="today" data-autoclose="1" name="date2" bs-datepicker>
      </div>
      <hr>
      <!-- Date range example -->
      <div class="form-group">
        <label class="control-label"><i class="fa fa-calendar"></i> <i class="fa fa-arrows-h"></i> <i class="fa fa-calendar"></i> Date range <small>(dynamic)</small></label><br>
        <div class="form-group col-xs-6">
          <input type="text" class="form-control" ng-model="fromDate"  data-max-date="{{untilDate}}" placeholder="From" data-has-today="true" data-has-clear="true" bs-datepicker>
        </div>
        <div class="form-group col-xs-6">
          <input type="text" class="form-control" ng-model="untilDate"  data-min-date="{{fromDate}}" placeholder="Until" data-has-today="true" data-has-clear="false" bs-datepicker>
        </div>
      </div>
    </form>
  </div>


  <h2 id="datepickers-usage">Usage</h2>
  <p>Append a <code>bs-datepicker</code>attribute to any element to enable the directive.</p>
  <div class="callout callout-info">
    <h4>The module exposes a <code>$datepicker</code>service</h4>
    <p>Available for programmatic use (mainly in directives as it requires a DOM element).</p>
    <div class="highlight">
      <pre>
        <code class="javascript" highlight-block>
          var myDatepicker = $datepicker(element, ngModelController);
        </code>
      </pre>
    </div>
  </div>

  <h3>Options</h3>
  <p>Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
  <div class="callout callout-info">
    <h4>This module supports exotic placement options!</h4>
    <p>You can position your datepicker in corners (such as <code>bottom-left</code>) or any other combination two.</p>
    <p>Exotic placement options are not part of the Bootstrap's core, to use them you must use <code>bootstrap-additions.css</code> from the <a href="//github.com/mgcrea/bootstrap-additions" target="_blank">BootstrapAdditions</a> project. This project being not yet fully released, meanwhile, you can use the <a href="//mgcrea.github.io/angular-strap/static/styles/bootstrap-additions.min.css" target="_blank">development snapshot</a> compiled for these docs.</p>
  </div>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 100px;">Name</th>
          <th style="width: 100px;">type</th>
          <th style="width: 50px;">default</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>animation</td>
          <td>string</td>
          <td>am-fade</td>
          <td>apply a CSS animation powered by <code>ngAnimate</code></td>
        </tr>
        <tr>
          <td>placement</td>
          <td>string</td>
          <td>'bottom-left'</td>
          <td>
            how to position the datepicker - top | bottom | left | right | auto, or any combination like bottom-left or auto bottom-left.<br>
            When "auto" is specified, it will dynamically reorient the datepicker. For example, if placement is "auto left", the datepicker will display to the left when possible, otherwise it will display right.
          </td>
        </tr>
        <tr>
          <td>trigger</td>
          <td>string</td>
          <td>'focus'</td>
          <td>how datepicker is triggered - click | hover | focus | manual</td>
        </tr>
        <tr>
          <td>html</td>
          <td>boolean</td>
          <td>false</td>
          <td>replace <code>ng-bind</code> with <code>ng-bind-html</code>, requires <code>ngSanitize</code> to be loaded</td>
        </tr>
        <tr>
          <td>delay</td>
          <td>number | object</td>
          <td>0</td>
          <td>
            <p>delay showing and hiding the datepicker (ms) - does not apply to manual trigger type</p>
            <p>If a number is supplied, delay is applied to both hide/show</p>
            <p>Object structure is:
              <code>delay: { show: 500, hide: 100 }</code>
            </p>
          </td>
        </tr>
        <tr>
          <td>container</td>
          <td>string | false</td>
          <td>false</td>
          <td>
            <p>Appends the datepicker to a specific element. Example:
              <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the datepicker in the flow of the document near the triggering element -&nbsp;which will prevent the datepicker from floating away from the triggering element during a window resize.</p>
          </td>
        </tr>
        <tr>
          <td>template</td>
          <td>path | id</td>
          <td>'$datepicker'</td>
          <td>
            <p>If provided, overrides the default template, can be either a remote URL or a cached template id.</p>
          </td>
        </tr>
        <tr>
          <td>onShow</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked after the datepicker is shown.</p>
          </td>
        </tr>
        <tr>
          <td>onBeforeShow</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked before the datepicker is shown.</p>
          </td>
        </tr>
        <tr>
          <td>onHide</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked after the datepicker is hidden.</p>
          </td>
        </tr>
        <tr>
          <td>onBeforeHide</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked before the datepicker is hidden.</p>
          </td>
        </tr>
        <tr>
          <td>dateFormat</td>
          <td>string</td>
          <td>'shortDate'</td>
          <td>
            <p>Rendering format of your date, leverages <a href="http://docs.angularjs.org/api/ng.filter:date">ng.filter:date</a>.</p>
          </td>
        </tr>
        <tr>
          <td>modelDateFormat</td>
          <td>string</td>
          <td>null</td>
          <td>
            <p>Model format of your date, leverages <a href="http://docs.angularjs.org/api/ng.filter:date">ng.filter:date</a>. You should also set dateType to <code>string</code>
            to use this option.</p>
          </td>
        </tr>
        <tr>
          <td>dateType</td>
          <td>string</td>
          <td>'date'</td>
          <td>
            <p>Expected model type of your date - date | number | unix | iso | string</p>

            <p>If type is "number" then datepicker uses milliseconds to set date, if "unix" - seconds</p>
          </td>
        </tr>
		<tr>
          <td>timezone</td>
          <td>string</td>
          <td>null</td>
          <td>
            <p>Timezone of your date - null, UTC</p>
            <p>"UTC" for UTC or null for local timezone.</p>
          </td>
        </tr>
        <tr>
          <td>autoclose</td>
          <td>boolean</td>
          <td>false</td>
          <td>
            <p>Whether the picker should close itself upon select.</p>
          </td>
        </tr>
        <tr>
          <td>useNative</td>
          <td>boolean</td>
          <td>false</td>
          <td>
            <p>Whether to use a native component if available (iOS/Android).</p>
          </td>
        </tr>
        <tr>
          <td>minDate</td>
          <td>date*</td>
          <td>-Infinity</td>
          <td>
            <p>Minimum allowed date for selection <small>(* fed into the <code>Date</code> constructor)</small>. You can set this to the current date by passing the string "today" into the 'data-min-date' attribute, or by setting minDate to <code>new Date()</code> when configuring the provider defaults.</p>
          </td>
        </tr>
        <tr>
          <td>maxDate</td>
          <td>date*</td>
          <td>+Infinity</td>
          <td>
            <p>Maximum allowed date for selection <small>(* fed into the <code>Date</code> constructor)</small>. You can set this to the current date by passing the string "today" into the 'data-max-date' attribute, or by setting maxDate to <code>new Date()</code> when configuring the provider defaults.</p>
          </td>
        </tr>
        <tr>
          <td>startView</td>
          <td>number</td>
          <td>0</td>
          <td>
            <p>View that sould be opened by default - 0 | 1 | 2.</p>
          </td>
        </tr>
        <tr>
          <td>minView</td>
          <td>number</td>
          <td>0</td>
          <td>
            <p>Minimum allowed view - 0 | 1 | 2. 1 will only allow month selection.</p>
          </td>
        </tr>
        <tr>
          <td>startWeek</td>
          <td>number</td>
          <td>0</td>
          <td>
            <p>First day of the week (0 - Sunday, 1 - Monday, 2 - Tuesday, etc.)</p>
          </td>
        </tr>
        <tr>
          <td>startDate</td>
          <td>date*</td>
          <td>today</td>
          <td>
            <p>Date that should be opened by default.</p>
          </td>
        </tr>
        <tr>
          <td>iconLeft</td>
          <td>string</td>
          <td>'glyphicon glyphicon-chevron-left'</td>
          <td>
            <p>CSS class for 'left' icon.</p>
          </td>
        </tr>
        <tr>
          <td>iconRight</td>
          <td>string</td>
          <td>'glyphicon glyphicon-chevron-right'</td>
          <td>
            <p>CSS class for 'right' icon.</p>
          </td>
        </tr>
        <tr>
          <td>daysOfWeekDisabled</td>
          <td>string</td>
          <td>''</td>
          <td>
            <p>List of decimal days of the week values that are disabled and hence cannot be selected. For example, '06' disables Sunday and Saturday, '12345' disables Monday to Friday.</p>
          </td>
        </tr>
        <tr>
          <td>disabledDates</td>
          <td>array of date ranges</td>
          <td>[]</td>
          <td>
            <p>Array of date ranges to disable.</p>
            <p>Example date range: <code>{ start: new Date(2010, 11, 24), end: new Date(2010, 11, 25) }</code></p>
          </td>
        </tr>
        <tr>
          <td>hasToday</td>
          <td>boolean</td>
          <td>false</td>
          <td>
            <p>Whether the picker has Today button.</p>
          </td>
        </tr>
        <tr>
          <td>hasClear</td>
          <td>boolean</td>
          <td>false</td>
          <td>
            <p>Whether the picker has Clear button.</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="callout callout-info">
    <h4>Default options</h4>
    <p>You can override global defaults for the plugin with <code>$datepickerProvider.defaults</code></p>
    <div class="highlight">
      <pre class="bs-exemple-code">
        <code class="javascript" highlight-block>
          angular.module('myApp')
          .config(function($datepickerProvider) {
            angular.extend($datepickerProvider.defaults, {
              dateFormat: 'dd/MM/yyyy',
              startWeek: 1
            });
          })
        </code>
      </pre>
    </div>
  </div>

</div>
